<template>
  <div class="cooperative_partner">
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>
		
		<div class="container my_order bgd_color_gray">
			<div class="content_wrap">
				<div class="tab_nav_wrap">
					<div class="tab_nav bgd_col_fff overflow_hide " >
						<div @click="firstClick" v-bind:class="{active: isActive1}" class="left nav_one width50 text_center height94 line_height94 box_size_border">
							<span class="f_size32">一阶伙伴</span>
						</div>
						<div @click="secondClick" v-bind:class="{active: isActive2}" class="right nav_one width50 text_center height94 line_height94 box_size_border">
							<span class="f_size32">二阶伙伴</span>
						</div>
					</div>
				</div>
				<div v-show="isActive1" class="tab_content_wrap">
					<div class="tab_content">
						<div v-for="item in first" class="c_row">
							<div class="left head_pic_wrap">
								<img :src="src+item.photo"/>
							</div>
							<div class="left c_time_wrap f_size24">
								<p class="color3"><span>{{item.roleName}}：</span><span>{{item.phone}}</span></p>
								<p class="color3"><span>注册时间：</span><span>{{item.create_time}}</span></p>
							</div>
						</div>
					</div>
				</div>
        <div v-show="isActive2" class="tab_content_wrap">
					<div class="tab_content">
						<div v-for="item in second" class="c_row">
							<div class="left head_pic_wrap">
								<img :src="src+item.photo"/>
							</div>
              <div class="left c_time_wrap f_size24">
								<p class="color3"><span>{{item.roleName}}：</span><span>{{item.phone}}</span></p>
								<p class="color3"><span>注册时间：</span><span>{{item.create_time}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

  </div>
</template>
<script>
export default {
  created () {
    this.$api.get('/front/children', null, r => {
      console.log('合作伙伴r', r)
      this.first = r.data.first.list
      this.second = r.data.second.list
    })
  },
  data () {
    return {
    	leftText: '',
      headerText: '我的合作伙伴',
      isActive1: true,
      isActive2: false,
      src: this.$src,
      first: [],
      second: []
    }
  },
  methods: {
    firstClick: function () {
      this.isActive1 = true
      this.isActive2 = false
    },
    secondClick: function () {
      this.isActive2 = true
      this.isActive1 = false
    }
  }
}
</script>

<style>
</style>
